<!--
 * @Author: Aaron
 * @Date: 2022-03-10 16:12:58
 * @LastEditors: vn53el9 vn53el9@email.wal.mart.com
 * @LastEditTime: 2022-06-08 15:10:51
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\components\dialogTableInfo.vue
 * @Company: 沃尔玛
-->
<template>
  <el-dialog :title="title" :visible.sync="value" :width="width" top="10vh" :before-close="handleClose" custom-class="info-dialog">
    <essTable
      ref="essTableRef"
      size="mini"
      :thead-list="theadList"
      :external-height="20"
      :data-list="dataList"
      :count-height="false"
      :container-box="containerBox"
      :selectable="selectable"
      :total="total"
      :page-params="pageParams"
      :pagination-show="paginationShow"
      @selectionChange="selectionChange"
      @tableEvent="() => $emit('tableEvent', ...arguments)"
      @handlePageChange="handlePageChange"
    >
      <slot v-for="item in slotList" :slot="item" :name="item" />
      <template v-if="slotCustom" v-slot:remark="{scope}">
        <div>
          <span>JD SKU ID：{{ scope.row.jdSkuId }} &nbsp;&nbsp;</span>
          <span>报价：{{ scope.row.sellingPrice }}</span>
        </div>
      </template>
    </essTable>
    <span v-if="footer" slot="footer" class="dialog-footer">
      <el-button @click="$emit('cancel')">取 消</el-button>
      <el-button type="primary" @click="$emit('determine')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import essTable from '@/components/eTable/eTable.vue'

export default {
  name: 'DialogTableInfo',
  components: {
    essTable
  },
  model: {
    prop: 'value',
    event: 'dialogVisibleChange'
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    selectable: {
      type: Function,
      default: () => {
        return () => {}
      }
    },
    theadList: {
      type: Array,
      default() {
        return []
      }
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    },
    footer: {
      type: Boolean,
      default: false
    },
    slotList: {
      type: Array,
      default() {
        return []
      }
    },
    confirmContent: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '1050px'
    },
    paginationShow: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    pageParams: {
      type: Object,
      default() {
        return {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    slotCustom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      containerBox: '.info-dialog .el-dialog__body'
    }
  },
  watch: {
    value(v) {
      if (v) {
        this.$nextTick(() => {
          this.$refs.essTableRef && this.$refs.essTableRef.createAutoSetHeight()
        })
      } else {
        this.$refs.essTableRef && this.$refs.essTableRef.closeAutoSetHeight()
      }
    }
  },
  methods: {
    handleClose() {
      const confirmContent = this.confirmContent
      if (confirmContent) {
        this.$confirm(confirmContent)
          .then((_) => {
            this.$emit('dialogVisibleChange', false)
          })
          .catch((_) => {})
      } else {
        this.$emit('dialogVisibleChange', false)
      }
    },
    // 选中数据发生改变时候
    selectionChange(val) {
      this.$emit('selectionChange', val)
    },
    handlePageChange(val) {
      this.$emit('handlePageChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 10px 20px;
  height: 75vh;
}
/deep/ .el-dialog__header {
  padding-bottom: 0;
}
</style>
